<template>
    <div class="shop-info-bar" :class="containerClass" @click="onClick">
        <div class="item">
            <div class="img-box">
                <img class="avatar" :src="cover" mode="cover" alt="">
            </div>
            <div class="info-box">
                <div class="name text-normal font-bold">{{name}}</div>
                <div class="label text-tiny orange-gold-color" v-if="tag">
                    <img class="medal" src="https://static.playground.forzoom.tech/meta/zhuyintiancheng/shop/shop_medal.png" />
                    <span class="tag">{{tag}}</span>
                </div>
                <div class="info text-tiny">
                    <span>{{isPhotography ? '套系' : '商品'}}  {{isPhotography ? pkg : good}}</span>
                    <span class="mr-left-20">访客 {{visitorNumber}}</span>
                </div>
            </div>
        </div>
        <div class="callPhone" style="padding: 70rpx 10rpx 0rpx 0rpx;">
            <div class="comment info_bg_bl" style="margin:0rpx" @click.stop="makeCall(phone)">
                <div class="comment_img info_bg_gr">
                    <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/2_1.png" class="phone_img_icon" alt="" />
                </div>
                <div class="comment_con padding_le_10 phone_white">CALL</div>
            </div>
        </div>
        <div v-if="rightArrowVisible" class="icon right">&#xe770;</div>
    </div>
</template>

<script>
export default {
    name: 'ShopInfoBar',
    props: {
        /** 容器类 */
        containerClass: {
            type: [ Object, Array ],
        },
        /** 封面 */
        cover: {
            type: String,
        },
        isPhotography: {
            type: Number,
        },
        name: {
            type: String,
        },
        tag: {
            type: String,
        },
        good: {
            type: Number,
        },
        pkg: {
            type: String,
        },
        visitorNumber: {
            type: String,
        },
        /** 右边的arrow是否可见 */
        rightArrowVisible: {
            type: Boolean,
        },
        phone:{
            type: String,
        }
    },
    methods: {
        onClick() {
            this.$emit('click');
        },
        makeCall(phone){
            if(phone){
                wx.makePhoneCall({
                    phoneNumber: phone,
                });
            }
            
        }
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.shop-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px 15px 15px;
    border-bottom: 2rpx solid @color-default-border;

    .item {
        display: flex;
        border-radius: 14rpx;
        .img-box {
            width: 60px;
            height: 60px;
            .avatar {
                width: 100%;
                height: 100%;
                border-radius: 7px;
            }
        }
        .info-box {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            margin-left: 10px;
            .mr-left-20 {
                margin-left: 40rpx;
            }
            .label {
                display: inline-block;
                background-color: @color-gold;
                .medal {
                    width: 11px;
                    height: 11px;
                }
                .tag {
                    padding: 0 4px;
                }
            }
        }
    }

    .icon.right {
        font-size: 18px;
        color: @color-font-2;
    }
}
</style>
